<template>
  <div class="notebook">
    <el-tooltip effect="dark" :content="$t('newSearchResult.clear')" placement="left">
      <div class="reset" @click="resetAll">
        <i class="iconfont icon-saoba"></i>
      </div>
    </el-tooltip>
    <!--<el-card class="box-card">-->
      <!--<el-row>-->
        <!--<el-col :span="24"  class="areadivision">-->
          <!--<span class="name">{{$t('NoteBook.Location')}}</span>-->
          <!--<el-select :disabled="Ban" v-model="location.geoValue" multiple collapse-tags-->
                     <!--placeholder="Geo"-->
                     <!--@change="changeAccountGeo(location.geoValue)">-->
            <!--<el-option-->
              <!--v-for="item in location.geoData"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value"-->
              <!--:disabled="item.disabled">-->
            <!--</el-option>-->
          <!--</el-select>-->
          <!--<el-select :disabled="Ban" v-model="location.regionValue" multiple collapse-tags-->
                     <!--placeholder="Region"-->
                     <!--@change="changeAccountRegion(location.regionValue)">-->
            <!--<el-option-->
              <!--v-for="item in location.regionData"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value"-->
              <!--:disabled="item.disabled">-->
            <!--</el-option>-->
          <!--</el-select>-->
          <!--<el-select :disabled="Ban" v-model="location.countryValue" multiple collapse-tags-->
                     <!--placeholder="Country"-->
                     <!--@change="changeAccountCountry(location.countryValue)">-->
            <!--<el-option-->
              <!--v-for="item in location.countryData"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value"-->
              <!--:disabled="item.disabled">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-col>-->
      <!--</el-row>-->
      <!--<el-row class="elrow">-->
        <!--<el-col :span="24" class="areadivision">-->
          <!--<span class="name">{{$t('NoteBook.Product')}}</span>-->
          <!--<el-select :disabled="Ban" v-model="product.finalBuValue" multiple collapse-tags-->
                     <!--placeholder="Final_Bu"-->
                     <!--@change="changeAccountFinalBu(product.finalBuValue)">-->
            <!--<el-option-->
              <!--v-for="item in product.finalBuData"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value"-->
              <!--:disabled="item.disabled">-->
            <!--</el-option>-->
          <!--</el-select>-->
          <!--<el-select :disabled="Ban" v-model="product.brandValue" multiple collapse-tags-->
                     <!--placeholder="Brand"-->
                     <!--@change="changeAccountBrand(product.brandValue)">-->
            <!--<el-option-->
              <!--v-for="item in product.brandData"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value"-->
              <!--:disabled="item.disabled">-->
            <!--</el-option>-->
          <!--</el-select>-->
          <!--<el-select :disabled="Ban" v-model="product.seriesValue" multiple collapse-tags-->
                     <!--placeholder="Series"-->
                     <!--@change="changeAccountSeries(product.seriesValue)">-->
            <!--<el-option-->
              <!--v-for="item in product.seriesData"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value"-->
              <!--:disabled="item.disabled">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-col>-->
      <!--</el-row>-->
    <!--</el-card>-->
    <div class="select-dimension">
      <el-card>
        <div class="class-row">
          <div class="class-columns">
            <div class="class-column">
              <span class="selectName">{{$t('select.Geo')}}</span>
              <el-select
                v-model="location.geoValue"
                @change="changeAccountGeo"
                multiple
                collapse-tags
                style="margin-left: 5px;">
                <el-option
                  v-for="item in location.geoData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="class-column">
              <span class="selectName">{{$t('select.Region')}}</span>
              <el-select
                v-model="location.regionValue"
                @change="changeAccountRegion"
                multiple
                collapse-tags
                style="margin-left: 5px;">
                <el-option
                  v-for="item in location.regionData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="class-column">
              <span class="selectName">{{$t('select.Country')}}</span>
              <el-select
                v-model="location.countryValue"
                @change="changeAccountCountry"
                multiple
                collapse-tags
                style="margin-left: 5px;">
                <el-option
                  v-for="item in location.countryData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="activeTab">
      <!--Memory-->
      <el-tab-pane :label="$t('NoteBook.Memory')" name="memory_range"></el-tab-pane>
      <!--CPUSeries-->
      <el-tab-pane :label="$t('NoteBook.CPUSeries')" name="cpu_series"></el-tab-pane>
      <!--CPUGeneration-->
      <el-tab-pane :label="$t('NoteBook.CPUGeneration')" name="cpu_generation"></el-tab-pane>
      <!--DisplaySize-->
      <el-tab-pane :label="$t('NoteBook.DisplaySize')" name="display_size"></el-tab-pane>
    </el-tabs>
    <div class="littleTitle">
      <!--<i class="title-icon"></i>-->
      <span>{{$t('NoteBook.GeneralTrend')}}</span>
    </div>
    <el-card class="map-charts">
      <el-row>
        <el-col :span="8" v-loading="loading.sellinTrend">
        <div class="map-chart-title">{{$t('historical.CA')}}</div>
          <div class="nodata" v-if="showNoData.noData1">No Data</div>
          <div id="TrendSellin"></div>
        </el-col>
        <el-col :span="8" v-loading="loading.revTrend">
          <div class="map-chart-title">{{$t('historical.Rev')}}</div>
          <div class="nodata" v-if="showNoData.noData2">No Data</div>
          <div id="TrendRev"></div>
        </el-col>
        <!--<el-col :span="8" v-loading="loading.gpTrend">-->
          <!--<div class="map-chart-title">{{$t('historical.GP1')}}</div>-->
        <!--<div class="nodata" v-if="showNoData.noData3">No Data</div>-->
          <!--<div id="TrendGp"></div>-->
        <!--</el-col>-->
        <el-col :span="8" v-loading="loading.gpGrowthTrend">
          <div class="map-chart-title">{{$t('historical.GP')}}</div>
          <div class="nodata" v-if="showNoData.noData4">No Data</div>
          <div id="TrendGpGrowth"></div>
        </el-col>
      </el-row>
    </el-card>
    <div class="littleTitle">
      <!--<i class="title-icon"></i>-->
      <span>{{$t('NoteBook.ConfigurationComparison')}}</span>
    </div>
    <el-card class="map-charts comparisonRadio">
      <el-row style="text-align: center;">
        <el-col :span="22" :offset="1">
          <el-radio-group v-model="comparisonRadio" class="but-tab" size="mini" @change="changeComparisonRadio(comparisonRadio)">
            <el-radio-button label="Geo">Geo</el-radio-button>
            <el-radio-button label="Final_Bu">Bu</el-radio-button>
          </el-radio-group>
          <el-select v-model="comparisonYearValue" placeholder="Year" size="small"
                     @change="changeComparisonYear"
                     popper-class="comyear-select">
            <el-option
              v-for="item in comparisonYearOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" v-loading="loading.sellinComparison">
        <h3 class="map-chart-title">{{$t('historical.CA')}}</h3>
          <div class="nodata" v-if="showNoData.noData5">No Data</div>
        <div id="ComparisonSellin"></div>
        </el-col>
        <el-col :span="8" v-loading="loading.revComparison">
          <h3 class="map-chart-title">{{$t('historical.Rev')}}</h3>
          <div class="nodata" v-if="showNoData.noData6">No Data</div>
          <div id="ComparisonRev"></div>
        </el-col>
        <!--<el-col :span="8"v-loading="loading.gpComparison">-->
          <!--<h3 class="map-chart-title">{{$t('historical.GP1')}}</h3>-->
        <!--<div class="nodata" v-if="showNoData.noData7">No Data</div>-->
          <!--<div id="ComparisonGp"></div>-->
        <!--</el-col>-->
        <el-col :span="8" v-loading="loading.gpGrowthComparison">
          <h3 class="map-chart-title">{{$t('historical.GP')}}</h3>
          <div class="nodata" v-if="showNoData.noData8">No Data</div>
          <div id="ComparisonGpGrowth"></div>
        </el-col>
        <!--<span class="returnIcon"  @click="clickReturnIcon"-->
              <!--v-if="returnIcon"><i class="icon iconfont icon-fanhui"></i>-->
            <!--</span>-->
      </el-row>
    </el-card>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import {getUsername} from '../../../utils/auth'

  export default {
    name: 'Configguration',
    data() {
      return {
        showNoData: {
          noData1: false,
          noData2: false,
          noData3: false,
          noData4: false,
          noData5: false,
          noData6: false,
          noData61: false,
          noData7: false,
          noData8: false,
          noData9: false,
          noData91: false
        },
        activeName: 'memory_range',
        location:{
          geoData: [],
          geoValue: [],
          regionData: [],
          regionValue: [],
          countryData: [],
          countryValue: []
        },
        product: {
          pgData: [],
          pgValue: [],
          finalBuData: [],
          finalBuValue: [],
          brandData: [],
          brandValue: [],
          seriesData: [],
          seriesValue: [],
          phProductData: [],
          phProductValue: []
        },
        productData: '',
        Ban: false, // 选择框是否禁用
        geoBan: false,
        regionBan: false,
        countryBan: false,
        finalBuBan: false,
        brandBan: false,
        seriesBan: false,
        ChartColor: ['#3d62f2', '#913af6', '#47a7f8', '#69e3f2', '#9f37c1', '#d73ffd', '#f08351', '#c24039', '#78ebe0', '#2bd2b8', '#ffc801', '#ffe403', '#ec5fa8', '#c2398d'],
        TrendDom: {
          sellin: '',
          rev: '',
          gp: ''
        },
        ComparisonDom: {
          sellin: '',
          rev: '',
          gp: '',
          gpGrowth: ''
        },
        loading: {
          sellinTrend: false,
          revTrend: false,
          gpTrend: false,
          gpGrowthTrend: false,
          sellinComparison: false,
          revComparison: false,
          gpComparison: false,
          gpGrowthComparison: false
        },
        errorInfo: {
          color: '#fff',
          text: 'NO DATA',
          textColor: '#000',
          maskColor: '#fff'
        },
        paramsSet: {
          form_fis_quarter: '201401',
          fis_flag: 'fis_quarter',
          type: '',
          cpu_series: ['I3','I5','I7'],
          cpu_generation: ['5','6','7','8'],
          fis_year: ['2017'],
          fis_month: [],
          fis_quarter: []
        },
        comparisonRadio: 'Geo',
        comparisonYearValue: '2017',
        comparisonYearOptions: [
          {
            value: '2014',
            label: 'FY1415'
          }, {
            value: '2015',
            label: 'FY1516'
          }, {
            value: '2016',
            label: 'FY1617'
          }, {
            value: '2017',
            label: 'FY1718'
          }, {
            value: '2018',
            label: 'FY1819'
          }
        ],
        comparisonRadioData: {
          geoData: {},
          geoxAxisData: [],
          final_buData: {},
          final_buxAxisData: [],
          comparisonData: {},
          comparisonxAxisData: []
        },
        returnIcon: false,  // 钻去后的返回icon
        countIcon: 0, // 钻去后的返回icon计数器
        testPort: '', // http://10.116.38.238:8082
        revData: {},
        gpData: {},
        gpGrowthData: {},
        revDrillData: {},
        gpDrillData: {},
        gpGrowthDrillData: {}
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ])
    },
    methods: {
      resetAll() {
        this.location.geoValue = []
        this.location.regionValue = []
        this.location.countryValue = []
        this.product.finalBuValue = []
        this.product.brandValue = []
        this.product.seriesValue = []
        this.comparisonYearValue = '2017'
        this.paramsSet.fis_year = [this.comparisonYearValue]
        // this.returnIcon = false
        this.loadAllSelect()
        this.handleClick()
      },
      // 下拉框接口
      loadGeo() {
        const _this = this
        this.axios.post('/dropSelect/geoSelect.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            var datas = resData.geo.map(item => ({value: item, label: item, disabled: false}))
            _this.location.geoData = datas
          }
        })
      },
      loadRegion() {
        const _this = this
        this.axios.post('/dropSelect/regionSelect.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            var datas = resData.region.map(item => ({value: item, label: item, disabled: false}))
            _this.location.regionData = datas
          }
        })
      },
      loadCountry() {
        const _this = this
        this.axios.post('/dropSelect/countrySelect.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            var datas = resData.country.map(item => ({value: item, label: item, disabled: false}))
            _this.location.countryData = datas
          }
        })
      },
      loadProduct() {
        const _this = this
        this.axios.post('/dropSelect/productSelect.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            var finalBuDatas = resData.final_bu.map(item => ({value: item, label: item, disabled: false}))
            var brandDatas = resData.brand.map(item => ({value: item, label: item, disabled: false}))
            var seriesDatas = resData.series.map(item => ({value: item, label: item, disabled: false}))
            _this.product.finalBuData = finalBuDatas
            _this.product.brandData = brandDatas
            _this.product.seriesData = seriesDatas
          }
        })
      },
      loadAllSelect(){
        this.loadGeo()
        this.loadRegion()
        this.loadCountry()
        this.loadProduct()
      },
      changeAccountGeo() {
        const _this = this
        this.axios.post('/dropSelect/geoSelect.do', {
          username: getUsername(),
          geos: this.location.geoValue
        }).then(res => {
          if (res.status === 200) {
            _this.location.regionData = []
            _this.location.regionValue = []
            _this.location.countryData = []
            _this.location.countryValue = []
            var resData = res.data.data
            if (resData.region) {
              _this.location.regionData = resData.region.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadRegion()
            }
            if (resData.country) {
              _this.location.countryData = resData.country.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCountry()
            }
            this.getAllEcharts()
          }
        })
      },
      changeAccountRegion() {
        const _this = this
        this.axios.post('/dropSelect/regionSelect.do', {
          username: getUsername(),
          regions: this.location.regionValue
        }).then(res => {
          if (res.status === 200) {
            _this.location.countryData = []
            _this.location.countryValue = []
            var resData = res.data.data
            if (resData.country) {
              _this.location.countryData = resData.country.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCountry()
            }
            this.getAllEcharts()
          }
        })
      },
      changeAccountCountry() {
        this.axios.post('/dropSelect/countrySelect.do', {
          username: getUsername(),
          countrys: this.location.countryValue
        }).then(res => {
          if (res.status === 200) {
            this.getAllEcharts()
          }
        })
      },
      changeAccountFinalBu(){
        const _this = this
        this.axios.post('/dropSelect/productSelect.do',{
          username: getUsername(),
          final_bu: this.product.finalBuValue
        }).then(res => {
          if (res.status === 200) {
            _this.product.brandData = []
            _this.product.brandValue = []
            _this.product.seriesData = []
            _this.product.seriesValue = []
            var resData = res.data.data
            if (resData.brand) {
              _this.product.brandData = resData.brand.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadProduct()
            }
            if (resData.series) {
              _this.product.seriesData = resData.series.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadProduct()
            }
            this.getAllEcharts()
          }
        })
      },
      changeAccountBrand(){
        const _this = this
        this.axios.post('/dropSelect/productSelect.do',{
          username: getUsername(),
          brand: this.product.brandValue
        }).then(res => {
          if (res.status === 200) {
            _this.product.seriesData = []
            _this.product.seriesValue = []
            var resData = res.data.data
            if (resData.series) {
              _this.product.seriesData = resData.series.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadProduct()
            }
            this.getAllEcharts()
          }
        })
      },
      changeAccountSeries(){
        this.axios.post('/dropSelect/productSelect.do',{
          username: getUsername(),
          series: this.product.seriesValue
        }).then(res => {
          if (res.status === 200) {
            this.getAllEcharts()
          }
        })
      },
      // 图表部分
      initTrendDom() {
        this.TrendDom.sellin = this.echarts.init(document.getElementById('TrendSellin'), null, {render: 'canvas'})
        this.TrendDom.rev = this.echarts.init(document.getElementById('TrendRev'), null, {render: 'canvas'})
        // this.TrendDom.gp = this.echarts.init(document.getElementById('TrendGp'), null, {render: 'canvas'})
        this.TrendDom.gpGrowth = this.echarts.init(document.getElementById('TrendGpGrowth'), null, {render: 'canvas'})
      },
      initComparisonDom() {
        this.ComparisonDom.sellin = this.echarts.init(document.getElementById('ComparisonSellin'), null, {render: 'canvas'})
        this.ComparisonDom.rev = this.echarts.init(document.getElementById('ComparisonRev'), null, {render: 'canvas'})
        // this.ComparisonDom.gp = this.echarts.init(document.getElementById('ComparisonGp'), null, {render: 'canvas'})
        this.ComparisonDom.gpGrowth = this.echarts.init(document.getElementById('ComparisonGpGrowth'), null, {render: 'canvas'})
      },
      // echarts入参函数   params-上面图表入参，paramsComparison-下面图表入参
      params(indicators_name = '', type = '', cpu_series = [], cpu_generation = []) {
        return {
          username: getUsername(),
          geo: this.location.geoValue,
          region: this.location.regionValue,
          country: this.location.countryValue,
          final_bu: this.product.finalBuValue,
          brand: this.product.brandValue,
          series: this.product.seriesValue,
          form_fis_quarter: this.paramsSet.form_fis_quarter,
          fis_flag: this.paramsSet.fis_flag,
          indicators_name: indicators_name,
          type: type,
          cpu_series: cpu_series,
          cpu_generation: cpu_generation
        }
      },
      paramsComparison(indicators_name = '', type = '', cpu_series = [], cpu_generation = [], location_type = 'geo', product_type = 'final_bu',fis_year = ['2017']) {
        return {
          username: getUsername(),
          geo: this.location.geoValue,
          region: this.location.regionValue,
          country: this.location.countryValue,
          final_bu: this.product.finalBuValue,
          brand: this.product.brandValue,
          series: this.product.seriesValue,
          form_fis_quarter: this.paramsSet.form_fis_quarter,
          fis_flag: this.paramsSet.fis_flag,
          indicators_name: indicators_name,
          type: type,
          cpu_series: cpu_series,
          cpu_generation: cpu_generation,
          location_type: location_type,
          product_type: product_type,
          fis_year: this.paramsSet.fis_year
        }
      },
      // echarts上面四个图表数据及渲染
      async initTrendSellin(param) {
        const _this = this
        try {
          this.loading.sellinTrend = true
          let res = await this.axios.post(`${this.testPort}/notebookconfiguration/generalTrendByAccounted.do`, param)
          if (res.data.data.name.length !== 0) {
            const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980']
            let resData = res.data.data
            let xAxisData = resData.name
            let barData = resData.bar.value
            let legendData = []
            let barData1 = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              barData1.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 14,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = ''
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                type: 'scroll',
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf',
                  formatter: '{value}%'
                }
              },
              series: barData1
            }
            this.showNoData.noData1 = false
            this.TrendDom.sellin.clear()
            this.TrendDom.sellin.setOption(option)
          } else {
            this.TrendDom.sellin.clear()
            // this.TrendDom.sellin.showLoading('default', _this.errorInfo)
            this.showNoData.noData1 = true
          }
        } catch (error) {
          console.log(error)
          this.TrendDom.sellin.clear()
          // this.TrendDom.sellin.showLoading('default', _this.errorInfo)
          this.showNoData.noData1 = true
        }
        this.loading.sellinTrend = false
      },
      async initTrendRev(param) {
        const _this = this
        try {
          this.loading.revTrend = true
          let res = await this.axios.post(`${this.testPort}/notebookconfiguration/generalTrendByAccounted.do`, param)
          if (res.data.data.name.length !== 0) {
            const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980']
            let resData = res.data.data
            let xAxisData = resData.name
            let barData = resData.bar.value
            let legendData = []
            let barData1 = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              barData1.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 14,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
              confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = ''
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                type: 'scroll',
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf',
                  formatter: '{value}%'
                }
              },
              series: barData1
            }
            this.showNoData.noData2 = false
            this.TrendDom.rev.clear()
            this.TrendDom.rev.setOption(option)
          } else {
            this.TrendDom.rev.clear()
            this.showNoData.noData2 = true
            // this.TrendDom.rev.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.TrendDom.rev.clear()
          this.showNoData.noData2 = true
          // this.TrendDom.rev.showLoading('default', _this.errorInfo)
        }
        this.loading.revTrend = false
      },
      async initTrendGp(param) {
        const _this = this
        try {
          this.loading.gpTrend = true
          let res = await this.axios.post(`${this.testPort}/notebookconfiguration/generalTrendByGpAccountedLine.do`, param)
          if (res.data.data.name.length !== 0) {
            const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980']
            let resData = res.data.data
            let xAxisData = resData.name
            let lineData = resData.lin.value
            let legendData = []
            let lineData1 = []
            let colorStops = []
            let k = 0
            for (let i in lineData) {
              // colorStops = [
              //   {offset: 0, color: this.ChartColor[k]},
              //   {offset: 1, color: this.ChartColor[k + 1]}
              // ]
              legendData.push(lineData[i].name)
              lineData1.push({
                name: lineData[i].name,
                data: lineData[i].value,
                type: 'line',
                stack: i,
                smooth: true,
                smoothMonotone: 'none',
                lineStyle: {
                  normal: {
                    width: 2,
                    // shadowColor: this.ChartColor[k],
                    // opactity: 0.5,
                    // shadowBlur: 12,
                    // shadowOffsetX: 0,
                    // shadowOffsetY: 5
                  }
                }
              })
              // k += 2
              // if (k > this.ChartColor.length - 2) {
              //   k = 0
              // }
            }
            let option = {
              color: colorList,
              tooltip: {
              confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = ''
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                type: 'scroll',
                itemWidth: 8,
                itemHeight: 12,
                data: legendData
              },
              grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf',
                  formatter: '{value}%'
                },
                splitLine: {
                  lineStyle: {
                    color: ['#f5f5f9']
                  }
                }
              },
              series: lineData1
            }
            this.TrendDom.gp.clear()
            this.showNoData.noData3 = false
            this.TrendDom.gp.setOption(option)
          } else {
            this.TrendDom.gp.clear()
            // this.TrendDom.gp.showLoading('default', _this.errorInfo)
            this.showNoData.noData3 = true
          }
        } catch (error) {
          console.log(error)
          this.TrendDom.gp.clear()
          this.showNoData.noData3 = true
          // this.TrendDom.gp.showLoading('default', _this.errorInfo)
        }
        this.loading.gpTrend = false
      },
      async initTrendGpGrowth(param) {
        const _this = this
        try {
          this.loading.gpGrowthTrend = true
          let res = await this.axios.post(`${this.testPort}/notebookconfiguration/generalTrendByAccounted.do`, param)
          if (res.data.data.name.length !== 0) {
            const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980']
            let resData = res.data.data
            let xAxisData = resData.name
            let barData = resData.bar.value
            let legendData = []
            let barData1 = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              barData1.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 14,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
              confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = ''
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                type: 'scroll',
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf',
                  formatter: '{value}%'
                }
              },
              series: barData1
            }
            this.TrendDom.gpGrowth.clear()
            this.showNoData.noData4 = false
            this.TrendDom.gpGrowth.setOption(option)
          } else {
            this.TrendDom.gpGrowth.clear()
            this.showNoData.noData4 = true
            // this.TrendDom.gpGrowth.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.TrendDom.gpGrowth.clear()
          this.showNoData.noData4 = true
          // this.TrendDom.gpGrowth.showLoading('default', _this.errorInfo)
        }
        this.loading.gpGrowthTrend = false
      },

      // 获取sellin的数据及渲染
      async reqSellin(param) {
        this.loading.sellinComparison = true
        let res = await this.axios.post(`${this.testPort}/notebookconfiguration/configurationComparisonByAccounted.do`, param)
        this.sellinData = res.data.data
        this.comparisonRadio === 'Geo'? this.initComparisonSellin( this.sellinData.geo) : this.initComparisonSellin( this.sellinData.final_bu)
      },
      initComparisonSellin(paramsData) {
        const _this = this
        if (paramsData.name.length !== 0){
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980']
          let barData = paramsData.bar.value
          let xAxisData = paramsData.name
          let legendData = []
          let barData1 = []
          for (let i in barData) {
            legendData.push(barData[i].name)
            barData1.push({
              name: barData[i].name,
              data: barData[i].value,
              type: 'bar',
              barMaxWidth: 14,
              stack: 'sum'
            })
          }
          let option = {
            color: colorList,
            tooltip: {
              confine: true,
              trigger: 'axis',
              formatter: function (params) {
                let item = params[0].name + '<br/>'
                for (let i in params) {
                  item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                }
                return item
              },
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              itemWidth: 10,
              itemHeight: 10,
              data: legendData
            },
            grid: {
              left: '3%',
              right: 0,
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                rotate: 45,
                interval: 0,
                fontSize: 9,
                color: '#959eaf'
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value} %',
                fontSize: 9,
                color: '#959eaf'
              }
            },
            series: barData1
          }
          this.ComparisonDom.sellin.clear()
          this.showNoData.noData5 = false
          this.ComparisonDom.sellin.setOption(option)
        } else {
          this.ComparisonDom.sellin.clear()
          this.showNoData.noData5 = true
          // this.ComparisonDom.sellin.showLoading('default', _this.errorInfo)
        }
        this.loading.sellinComparison = false
      },

      // 获取rev的数据及渲染
      async reqRev(param) {
        this.loading.revComparison = true
        let res = await this.axios.post(`${this.testPort}/notebookconfiguration/configurationComparisonByAccounted.do`, param)
        this.revData = res.data.data
        this.comparisonRadio === 'Geo'? this.initComparisonRev( this.revData.geo) : this.initComparisonRev( this.revData.final_bu)
      },
      initComparisonRev(paramsData) {
        const _this = this
        if (paramsData.name.length !== 0){
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980']
          let barData = paramsData.bar.value
          let xAxisData = paramsData.name
          let legendData = []
          let barData1 = []
          for (let i in barData) {
            legendData.push(barData[i].name)
            barData1.push({
              name: barData[i].name,
              data: barData[i].value,
              type: 'bar',
              barMaxWidth: 14,
              stack: 'sum'
            })
          }
          let option = {
            color: colorList,
            tooltip: {
              confine: true,
              trigger: 'axis',
              formatter: function (params) {
                let item = params[0].name + '<br/>'
                for (let i in params) {
                  item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                }
                return item
              },
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              itemWidth: 10,
              itemHeight: 10,
              data: legendData
            },
            grid: {
              left: '3%',
              right: 0,
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                rotate: 45,
                interval: 0,
                fontSize: 9,
                color: '#959eaf'
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value} %',
                fontSize: 9,
                color: '#959eaf'
              }
            },
            series: barData1
          }
          this.ComparisonDom.rev.clear()
          this.showNoData.noData6 = false
          this.ComparisonDom.rev.setOption(option)
        } else {
          this.ComparisonDom.rev.clear()
          this.showNoData.noData6 = true
          // this.ComparisonDom.rev.showLoading('default', _this.errorInfo)
        }
        this.loading.revComparison = false
      },
      // 获取gp的数据
      async reqGp(param) {
        this.loading.gpComparison = true
        let res = await this.axios.post(`${this.testPort}/notebookconfiguration/configurationComparisonByGpValue.do`, param)
        this.gpData = res.data.data
        this.comparisonRadio === 'Geo'? this.initComparisonGp( this.gpData.geo) : this.initComparisonGp( this.gpData.final_bu)
      },
      initComparisonGp(paramsData) {
        const _this = this
        if (paramsData.name.length !== 0){
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980']
          let barData = paramsData.bar.value
          let xAxisData = paramsData.name
          let legendData = []
          let barData1 = []
          let colorStops = []
          let k = 0
          for (let i in barData) {
            colorStops = [
              {offset: 0, color: this.ChartColor[k]},
              {offset: 1, color: this.ChartColor[k + 1]}
            ]
            legendData.push(barData[i].name)
            barData1.push({
              name: barData[i].name,
              data: barData[i].value,
              type: 'bar',
              barMaxWidth: 10,
              barGap: 0,
              lineStyle: {
                normal: {
                  width: 4,
                  shadowColor: this.ChartColor[k],
                  opactity: 0.5,
                  shadowBlur: 12,
                  shadowOffsetX: 0,
                  shadowOffsetY: 5
                }
              },
              // itemStyle: {
              //   normal: {
              //     color: {
              //       type: 'linear',
              //       x: 0,
              //       y: 0,
              //       x2: 0,
              //       y2: 1,
              //       colorStops: colorStops,
              //       globalCoord: false // 缺省为 false
              //     },
              //     barBorderRadius: [50, 50, 0, 0] //（顺时针左上，右上，右下，左下）
              //   },
              //   emphasis: {
              //     shadowBlur: 10,
              //     shadowOffsetX: 0,
              //     shadowColor: 'rgba(0, 0, 0, 0.5)'
              //   }
              // }
            })
            k += 2
            if (k > this.ChartColor.length) {
              k = 0
            }
          }
          let option = {
            color: colorList,
            grid: {
              left: '3%',
              right: '6%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              confine: true,
              trigger: 'axis',
              formatter: function (params) {
                let item = ''
                for (let i in params) {
                  item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                }
                return item
              },
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              type: 'scroll',
              itemWidth: 10,
              itemHeight: 10,
              data: legendData
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                rotate: 45,
                interval: 0,
                fontSize: 9,
                color: '#959eaf'
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              axisLine: {
                symbolOffset: 5,
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                fontSize: 9,
                color: '#959eaf',
                formatter: '{value}%'
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            series: barData1
          }
          this.ComparisonDom.gp.clear()
          this.showNoData.noData7 = false
          this.ComparisonDom.gp.setOption(option)
        } else {
          this.ComparisonDom.gp.clear()
          this.showNoData.noData7 = true
          // this.ComparisonDom.gp.showLoading('default', _this.errorInfo)
        }
        this.loading.gpComparison = false
      },
      // 获取gpGrowth的数据
      async reqGpGrowth(param) {
        this.loading.gpGrowthComparison = true
        let res = await this.axios.post(`${this.testPort}/notebookconfiguration/configurationComparisonByAccounted.do`, param)
        this.gpGrowthData = res.data.data
        this.comparisonRadio === 'Geo'? this.initComparisonGpGrowth( this.gpGrowthData.geo) : this.initComparisonGpGrowth( this.gpGrowthData.final_bu)
      },
      initComparisonGpGrowth(paramsData) {
        const _this = this
        if (paramsData.name.length !== 0){
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980']
          let barData = paramsData.bar.value
          let xAxisData = paramsData.name
          let legendData = []
          let barData1 = []
          for (let i in barData) {
            legendData.push(barData[i].name)
            barData1.push({
              name: barData[i].name,
              data: barData[i].value,
              type: 'bar',
              barMaxWidth: 14,
              stack: 'sum'
            })
          }
          let option = {
            color: colorList,
            tooltip: {
              confine: true,
              trigger: 'axis',
              formatter: function (params) {
                let item = params[0].name + '<br/>'
                for (let i in params) {
                  item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                }
                return item
              },
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              itemWidth: 10,
              itemHeight: 10,
              data: legendData
            },
            grid: {
              left: '3%',
              right: 0,
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                rotate: 45,
                interval: 0,
                fontSize: 9,
                color: '#959eaf'
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value} %',
                fontSize: 9,
                color: '#959eaf'
              }
            },
            series: barData1
          }
          this.ComparisonDom.gpGrowth.clear()
          this.showNoData.noData8 = false
          this.ComparisonDom.gpGrowth.setOption(option)
        } else{
          this.ComparisonDom.gpGrowth.clear()
          this.showNoData.noData8 = true
          // this.ComparisonDom.gpGrowth.showLoading('default', _this.errorInfo)
        }
        this.loading.gpGrowthComparison = false
      },
      // 下钻的数据
      async drillSellin(param) {
        const _this = this
        this.loading.sellinComparison = true
        let res = await this.axios.post(`${this.testPort}/notebookconfiguration/configurationComparisonByAccounted.do`, param)
        this.sellinDrillData = res.data.data
        if(param.location_type.length !== 0){
          _this.initComparisonSellin( this.sellinDrillData[param.location_type])
        }
        if(param.product_type.length !== 0){
          _this.initComparisonSellin( this.sellinDrillData[param.product_type])
        }
      },
      async drillRev(param) {
        const _this = this
        this.loading.revComparison = true
        let res = await this.axios.post(`${this.testPort}/notebookconfiguration/configurationComparisonByAccounted.do`, param)
        this.revDrillData = res.data.data
        if(param.location_type.length !== 0){
          _this.initComparisonRev( this.revDrillData[param.location_type])
        }
        if(param.product_type.length !== 0){
          _this.initComparisonRev( this.revDrillData[param.product_type])
        }
      },
      async drillGp(param) {
        const _this = this
        this.loading.gpComparison = true
        let res = await this.axios.post(`${this.testPort}/notebookconfiguration/configurationComparisonByGpValue.do`, param)
        this.gpDrillData = res.data.data
        if(param.location_type.length !== 0){
          _this.initComparisonGp( this.gpDrillData[param.location_type])
        }
        if(param.product_type.length !== 0){
          _this.initComparisonGp( this.gpDrillData[param.product_type])
        }
      },
      async drillGpGrowth(param) {
        const _this = this
        this.loading.gpGrowthComparison = true
        let res = await this.axios.post(`${this.testPort}/notebookconfiguration/configurationComparisonByAccounted.do`, param)
        this.gpGrowthDrillData = res.data.data
        if(param.location_type.length !== 0){
          _this.initComparisonGpGrowth( this.gpGrowthDrillData[param.location_type])
        }
        if(param.product_type.length !== 0){
          _this.initComparisonGpGrowth( this.gpGrowthDrillData[param.product_type])
        }
      },
      //  初始化图表：不同indicators_name和相同接口的不同type 上面图表 和 下面图表
      initEchartsTrend() {
        this.initTrendSellin(this.params(this.activeName, 'sellin'))
        this.initTrendRev(this.params(this.activeName, 'sdrev'))
        // this.initTrendGp(this.params(this.activeName))
        this.initTrendGpGrowth(this.params(this.activeName, 'gp'))
      },
      loadEchartsComparison() {
        this.reqSellin(this.paramsComparison(this.activeName, 'sellin'))
        this.reqRev(this.paramsComparison(this.activeName, 'sdrev'))
        // this.reqGp(this.paramsComparison(this.activeName))
        this.reqGpGrowth(this.paramsComparison(this.activeName, 'gp'))
      },

      // 当indicators_name为cpu_series   请增加  "cpu_series":["I3","I5","I7"]
      initEchartsTrend1() {
        this.initTrendSellin(this.params(this.activeName, 'sellin', this.paramsSet.cpu_series))
        this.initTrendRev(this.params(this.activeName, 'sdrev', this.paramsSet.cpu_series))
        // this.initTrendGp(this.params(this.activeName, '', this.paramsSet.cpu_series))
        this.initTrendGpGrowth(this.params(this.activeName, 'gp', this.paramsSet.cpu_series))
      },
      loadEchartsComparison1() {
        this.reqSellin(this.paramsComparison(this.activeName, 'sellin', this.paramsSet.cpu_series))
        this.reqRev(this.paramsComparison(this.activeName, 'sdrev', this.paramsSet.cpu_series))
        // this.reqGp(this.paramsComparison(this.activeName,'', this.paramsSet.cpu_series))
        this.reqGpGrowth(this.paramsComparison(this.activeName, 'gp', this.paramsSet.cpu_series))
      },
      // 当indicators_name为cpu_generation  请增加  "cpu_generation  ":["5","6","7","8"]
      initEchartsTrend2() {
        this.initTrendSellin(this.params(this.activeName, 'sellin', [], this.paramsSet.cpu_generation))
        this.initTrendRev(this.params(this.activeName, 'sdrev', [], this.paramsSet.cpu_generation))
        // this.initTrendGp(this.params(this.activeName, '', [], this.paramsSet.cpu_generation))
        this.initTrendGpGrowth(this.params(this.activeName, 'gp', [], this.paramsSet.cpu_generation))
      },
      loadEchartsComparison2() {
        this.reqSellin(this.paramsComparison(this.activeName, 'sellin', [], this.paramsSet.cpu_generation))
        this.reqRev(this.paramsComparison(this.activeName, 'sdrev', [], this.paramsSet.cpu_generation))
        // this.reqGp(this.paramsComparison(this.activeName,'', [], this.paramsSet.cpu_generation))
        this.reqGpGrowth(this.paramsComparison(this.activeName, 'gp', [], this.paramsSet.cpu_generation))
      },

      // 四大类切换(memory_range/cpu_series/cpu_generation/display_size)
      getAllEcharts(){
        this.countIcon = 0
        if(this.activeName === 'memory_range' || this.activeName === 'display_size'){
          this.initEchartsTrend()
          this.loadEchartsComparison()
        }
        if(this.activeName === 'cpu_series'){
          this.initEchartsTrend1()
          this.loadEchartsComparison1()
        }
        if(this.activeName === 'cpu_generation'){
          this.initEchartsTrend2()
          this.loadEchartsComparison2()
        }
        this.chartsResize()
      },
      handleClick(tab, event) {
        this.comparisonRadio = 'Geo'
        this.getAllEcharts()
      },
      //  切换两个按钮(geo/final_bu)
      changeComparisonRadio() {
        this.returnIcon = false
        this.countIcon = 0
        if (this.comparisonRadio === 'Geo') {
          this.initComparisonSellin( this.revData.geo)
          this.initComparisonRev( this.revData.geo)
          this.initComparisonGpGrowth( this.gpGrowthData.geo)
          // this.initComparisonGp( this.gpData.geo)
        }
        if (this.comparisonRadio === 'Final_Bu') {
          this.initComparisonSellin( this.revData.final_bu)
          this.initComparisonRev( this.revData.final_bu)
          this.initComparisonGpGrowth( this.gpGrowthData.final_bu)
          // this.initComparisonGp( this.gpData.final_bu)
        }
      },
      changeComparisonYear() {
        this.paramsSet.fis_year = [this.comparisonYearValue]
        if(this.activeName === 'memory_range' || this.activeName === 'display_size'){
          this.loadEchartsComparison()
        }
        if(this.activeName === 'cpu_series'){
          this.loadEchartsComparison1()
        }
        if(this.activeName === 'cpu_generation'){
          this.loadEchartsComparison2()
        }
      },
      // 图标返回按钮
      clickReturnIcon() {
        this.countIcon--
        if (this.comparisonRadio === 'Geo') {
          if (this.countIcon === 1) {
            this.location.regionValue = []
            this.drillRev(this.paramsComparison(this.activeName, 'sdrev',[],[],'region',''))
            this.drillGp(this.paramsComparison(this.activeName,'',[],[],'region',''))
            this.drillGpGrowth(this.paramsComparison(this.activeName, 'gp',[],[],'region',''))
          }
          if (this.countIcon === 0) {
            this.comparisonRadio = 'Geo'
            this.countIcon = 0
            this.returnIcon = false
            this.location.geoValue = []
            this.drillRev(this.paramsComparison(this.activeName, 'sdrev',[],[],'geo',''))
            this.drillGp(this.paramsComparison(this.activeName,'',[],[],'geo',''))
            this.drillGpGrowth(this.paramsComparison(this.activeName, 'gp',[],[],'geo',''))
          }
          if (this.countIcon < 0) {
            this.countIcon = 0
          }
        }
        if (this.comparisonRadio === 'Final_Bu') {
          if (this.countIcon === 1) {
            this.product.brandValue = []
            this.location.regionValue = []
            this.drillRev(this.paramsComparison(this.activeName, 'sdrev',[],[],'','product_brand'))
            this.drillGp(this.paramsComparison(this.activeName,'',[],[],'','product_brand'))
            this.drillGpGrowth(this.paramsComparison(this.activeName, 'gp',[],[],'','product_brand'))
          }
          if (this.countIcon === 0) {
            this.comparisonRadio = 'Final_Bu'
            this.returnIcon = false
            this.countIcon = 0
            this.product.final_buValue = []
            this.drillRev(this.paramsComparison(this.activeName, 'sdrev',[],[],'','final_bu'))
            this.drillGp(this.paramsComparison(this.activeName,'',[],[],'','final_bu'))
            this.drillGpGrowth(this.paramsComparison(this.activeName, 'gp',[],[],'','final_bu'))
          }
          if (this.countIcon < 0) {
            this.countIcon = 0
          }
        }
      },

      // 下钻函数
      drillFun(item){
        const _this = this
        _this.returnIcon = true
        _this.countIcon ++
        if(this.activeName === 'memory_range' || this.activeName === 'display_size'){
          if(_this.comparisonRadio === 'Geo'){
            if (_this.countIcon === 1) {
              _this.location.geoValue = [item]
              _this.initEchartsTrend()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',[],[],'region','',[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',[],[],'region','',[],[item]))
              // _this.drillGp(_this.paramsComparison(_this.activeName,'',[],[],'region','',[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',[],[],'region','',[],[item]))
            }
            if (_this.countIcon === 2) {
              _this.location.regionValue = [item]
              _this.initEchartsTrend()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',[],[],'country_code','',[],[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',[],[],'country_code','',[],[],[item]))
              // _this.drillGp(_this.paramsComparison(_this.activeName, '',[],[],'country_code','',[],[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',[],[],'country_code','',[],[],[item]))
            }
            if (_this.countIcon > 2) {
              _this.countIcon = 2
            }
          }
          if (_this.comparisonRadio === 'Final_Bu') {
            if (_this.countIcon === 1) {
              _this.product.finalBuValue = [item]
              _this.initEchartsTrend()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',[],[],'','product_brand',[],[],[],[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',[],[],'','product_brand',[],[],[],[],[item]))
              // _this.drillRev(_this.paramsComparison(_this.activeName, '',[],[],'','product_brand',[],[],[],[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',[],[],'','product_brand',[],[],[],[],[item]))
            }
            if (_this.countIcon === 2) {
              _this.product.brandValue = [item]
              _this.initEchartsTrend()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',[],[],'','product_series',[],[],[],[],[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',[],[],'','product_series',[],[],[],[],[],[item]))
              // _this.drillRev(_this.paramsComparison(_this.activeName, '',[],[],'','product_series',[],[],[],[],[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',[],[],'','product_series',[],[],[],[],[],[item]))
            }
            if (_this.countIcon > 2) {
              _this.countIcon = 2
            }
          }
        }
        if(this.activeName === 'cpu_series'){
          if(_this.comparisonRadio === 'Geo'){
            if (_this.countIcon === 1) {
              _this.location.geoValue = [item]
              _this.initEchartsTrend1()
              _this.drillSellin(_this.paramsComparison(this.activeName, 'sellin', this.paramsSet.cpu_series,[],'region','',[],[item]))
              _this.drillRev(_this.paramsComparison(this.activeName, 'sdrev', this.paramsSet.cpu_series,[],'region','',[],[item]))
              // _this.drillGp(_this.paramsComparison(this.activeName, '', this.paramsSet.cpu_series,[],'region','',[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(this.activeName, 'gp', this.paramsSet.cpu_series,[],'region','',[],[item]))
            }
            if (_this.countIcon === 2) {
              _this.location.regionValue = [item]
              _this.initEchartsTrend1()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',this.paramsSet.cpu_series,[],'country_code','',[],[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',this.paramsSet.cpu_series,[],'country_code','',[],[],[item]))
              // _this.drillGp(_this.paramsComparison(_this.activeName, '',this.paramsSet.cpu_series,[],'country_code','',[],[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',this.paramsSet.cpu_series,[],'country_code','',[],[],[item]))
            }
            if (_this.countIcon > 2) {
              _this.countIcon = 2
            }
          }
          if (_this.comparisonRadio === 'Final_Bu') {
            if (_this.countIcon === 1) {
              _this.product.finalBuValue = [item]
              _this.initEchartsTrend1()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',this.paramsSet.cpu_series,[],'','product_brand',[],[],[],[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',this.paramsSet.cpu_series,[],'','product_brand',[],[],[],[],[item]))
              // _this.drillRev(_this.paramsComparison(_this.activeName, '',this.paramsSet.cpu_series,[],'','product_brand',[],[],[],[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',this.paramsSet.cpu_series,[],'','product_brand',[],[],[],[],[item]))
            }
            if (_this.countIcon === 2) {
              _this.product.brandValue = [item]
              _this.initEchartsTrend1()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',this.paramsSet.cpu_series,[],'','product_series',[],[],[],[],[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',this.paramsSet.cpu_series,[],'','product_series',[],[],[],[],[],[item]))
              // _this.drillRev(_this.paramsComparison(_this.activeName, '',this.paramsSet.cpu_series,[],'','product_series',[],[],[],[],[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',this.paramsSet.cpu_series,[],'','product_series',[],[],[],[],[],[item]))
            }
            if (_this.countIcon > 2) {
              _this.countIcon = 2
            }
          }
        }
        if(this.activeName === 'cpu_generation'){
          if(_this.comparisonRadio === 'Geo'){
            if (_this.countIcon === 1) {
              _this.location.geoValue = [item]
              _this.initEchartsTrend2()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',[],this.paramsSet.cpu_generation,'region','',[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',[],this.paramsSet.cpu_generation,'region','',[],[item]))
              // _this.drillGp(_this.paramsComparison(_this.activeName,'',[],this.paramsSet.cpu_generation,'region','',[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',[],this.paramsSet.cpu_generation,'region','',[],[item]))
            }
            if (_this.countIcon === 2) {
              _this.location.regionValue = [item]
              _this.initEchartsTrend2()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',[],this.paramsSet.cpu_generation,'country_code','',[],[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',[],this.paramsSet.cpu_generation,'country_code','',[],[],[item]))
              // _this.drillGp(_this.paramsComparison(_this.activeName, '',[],this.paramsSet.cpu_generation,'country_code','',[],[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',[],this.paramsSet.cpu_generation,'country_code','',[],[],[item]))
            }
            if (_this.countIcon > 2) {
              _this.countIcon = 2
            }
          }
          if (_this.comparisonRadio === 'Final_Bu') {
            if (_this.countIcon === 1) {
              _this.product.finalBuValue = [item]
              _this.initEchartsTrend2()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',[],this.paramsSet.cpu_generation,'','product_brand',[],[],[],[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',[],this.paramsSet.cpu_generation,'','product_brand',[],[],[],[],[item]))
              // _this.drillRev(_this.paramsComparison(_this.activeName, '',[],this.paramsSet.cpu_generation,'','product_brand',[],[],[],[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',[],this.paramsSet.cpu_generation,'','product_brand',[],[],[],[],[item]))
            }
            if (_this.countIcon === 2) {
              _this.product.brandValue = [item]
              _this.initEchartsTrend2()
              _this.drillSellin(_this.paramsComparison(_this.activeName, 'sellin',[],this.paramsSet.cpu_generation,'','product_series',[],[],[],[],[],[item]))
              _this.drillRev(_this.paramsComparison(_this.activeName, 'sdrev',[],this.paramsSet.cpu_generation,'','product_series',[],[],[],[],[],[item]))
              // _this.drillRev(_this.paramsComparison(_this.activeName, '',[],this.paramsSet.cpu_generation,'','product_series',[],[],[],[],[],[item]))
              _this.drillGpGrowth(_this.paramsComparison(_this.activeName, 'gp',[],this.paramsSet.cpu_generation,'','product_series',[],[],[],[],[],[item]))
            }
            if (_this.countIcon > 2) {
              _this.countIcon = 2
            }
          }
        }
      },
      chartsResize() {
        const _this = this
        setTimeout(function () {
          _this.TrendDom.sellin.resize()
          _this.TrendDom.rev.resize()
          // _this.TrendDom.gp.resize()
          _this.TrendDom.gpGrowth.resize()
          _this.ComparisonDom.sellin.resize()
          _this.ComparisonDom.rev.resize()
          // _this.ComparisonDom.gp.resize()
          _this.ComparisonDom.gpGrowth.resize()
        }, 200)
      },
      mul(a, b) {
        let c = 0,
          d = a.toString(),
          e = b.toString()
        try {
          c += d.split(".")[1].length
        } catch (f) {
        }
        try {
          c += e.split(".")[1].length
        } catch (f) {
        }
        return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c)
      }
    },
    mounted() {
      const _this = this
      this.loadAllSelect()
      this.initTrendDom()
      this.initComparisonDom()
      this.initEchartsTrend()
      this.loadEchartsComparison()
      this.ComparisonDom.sellin.on('click', function (params) {
        _this.drillFun(params.name)
      })
      this.ComparisonDom.rev.on('click', function (params) {
        _this.drillFun(params.name)
      })
      this.ComparisonDom.gpGrowth.on('click', function (params) {
        _this.drillFun(params.name)
      })
      // this.ComparisonDom.gp.on('click', function (params) {
      //   _this.drillFun(params.name)
      // })

      window.onresize = function () {
        _this.chartsResize()
      }
    },
    watch: {
      'sidebar.opened': function () {
        this.chartsResize()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .notebook{
    user-select: none;
    padding: 20px 46px;
    overflow: hidden;
    .nodata{
      width: 100%;
      height: 100%;
      text-align:center;
      position: relative;
      /*padding-top:100px;*/
      top:100px;
      z-index:1;
    }
    .reset {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: fixed;
      top: 55px;
      right: 5px;
      z-index: 10;
      /*background: linear-gradient(to bottom right,#8928f5,#2853f1);*/
      background: #0090e0;
      cursor: pointer;
      text-align: center;
      box-shadow: 0 3px 12px #e0e2e9;
      i {
        line-height: 40px;
        font-size: 20px;
        color: #fff;
      }
    }
    .activeTab {
      margin-top: 20px;
      font: bold 20px Arial-BoldMT;
    }
    .box-card{
      padding: 4px 10px;
      .elrow{
        margin-top: 20px;
      }
      span.name{
        display: inline-block;
        margin-right: 3vw;
        font-size: 16px;
        width: 65px;
        color: #15122f;
      }
    }
    .select-dimension {
      position: relative;
      height: 64px;
      background-color: #fff;
      .el-card {
        height: 64px;
      }
      .class-row {
        height: 90px;
        margin: 0 0 0 15px;
        padding-top: 15px;
        /*margin-bottom: 20px;*/
        /*line-height: 40px;*/
        .class-columns {
          display: flex;
          .class-column {
            margin-right:30px;
            .selectName{
              font-size: 14px;
              color: #15122f;
            }
          }
        }
        /*&:last-child {*/
        /*margin-bottom: 0;*/
        /*}*/
      }
      .class-title {
        font-size: 16px;
        color: #15122f;
      }
    }
    .littleTitle {
      margin:20px 0;
      font-weight: bold;
      font-size:18px;
      font-family:OpenSansShin;
      color: #666;
      .title-icon{
        display:inline-block;
        vertical-align: middle;
        margin-right:6px;
        width:9px;
        height:3px;
        background-color: #72aff7;
      }
    }
    #TrendSellin, #TrendRev, #TrendGp, #TrendGpGrowth,
    #ComparisonSellin, #ComparisonRev, #ComparisonGp, #ComparisonGpGrowth {
      width: 100%;
      height: 30vh;
    }
    .map-charts{
      padding-left:10px;
      .marginbtm40{
        margin-bottom:40px;
      }
      .map-chart-title {
        width: 100%;
        height: 5vh;
        /*padding-top: 20px;*/
        padding-bottom: 20px;
        /*padding-left: 20px;*/
        font-weight: bold;
        font-size:16px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .returnIcon,.returnIcon2,.returnIcon3,.returnIcon4{
        position: absolute;
        right: 5px;
        top: 10px;
        cursor: pointer;
        .icon-fanhui {
          position: relative;
          z-index: 9999999999999;
          font-size: 20px;
          color: #1E90FF;
          margin-right: 5px;
        }
      }
      .btnMoreCharts{
        cursor: pointer;
        background: linear-gradient(to right, #3d62f2, #913af6);
        -webkit-background-clip: text;
        color: transparent;
        .el-icon-d-arrow-right{
          transform: rotate(90deg);
          background: linear-gradient(to right, #3d62f2, #913af6);
          -webkit-background-clip: text;
          color: transparent;
        }
      }
    }
  }
</style>
